<!--
 * @Author: 杨超
 * @Date: 2021-10-09 11:24:55
 * @LastEditTime: 2021-10-19 11:16:10
 * @LastEditors: 杨超
 * @Description: 
-->
<template>
    <div>
        <el-collapse v-for="item in list" :key="item.id" value="item" class="project">
            <el-collapse-item name="item">
                <template slot="title">
                    <div class="header">
                        <span>{{ item.name }}</span>
                        <span class="total">合计：{{ item.total }}元</span>
                    </div>
                    
                </template>
                <div class="content">
                    <BaseTable
                        v-if="item.subChildren && item.subChildren.length > 0"
                        :columns="columns"
                        :data="item.subChildren"
                        highlight-current-row
                        style="margin-bottom: 24px;"
                    >
                        <template #workAmount="{ scope: { row } }">
                            <span>{{ row.workAmount || '-' }} {{ row.arithmeticalUnit }}</span>
                        </template>
                        <template #unitPrice="{ scope: { row } }">
                            <span>{{ row.unitPrice || '-' }} 元</span>
                        </template>
                        <template #prepareCompletionMoney="{ scope: { row } }">
                            <span>{{ row.prepareCompletionMoney || '-' }} 元</span>
                        </template>
                    </BaseTable>
                    <ProjectItem v-if="item.children && item.children.length > 0" :list="item.children" />
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
import ProjectItem from './ProjectItem'

export default {
    name: 'ProjectItem',
    components: {
        ProjectItem
    },
    props: {
        list: {
            type: Array,
            default: () => ([])
        },
    },
    data() {
        return {
            columns: Object.freeze([
                {   
                    attrs: {
                        prop: 'name',
                        label: '项目名称',
                        'min-width': 140,
                        'show-overflow-tooltip': true,
                    }
                },
                {
                    slot: 'workAmount',
                    attrs: {
                        prop: 'workAmount',
                        label: '工程量',
                        'min-width': 120
                    }
                },
                {
                    slot: 'unitPrice',
                    attrs: {
                        prop: 'unitPrice',
                        label: '单价',
                        'min-width': 100
                    }
                },
                {
                    slot: 'prepareCompletionMoney',
                    attrs: {
                        prop: 'prepareCompletionMoney',
                        label: '计划完成金额',
                        'min-width': 140
                    }
                },
                {
                    attrs: {
                        prop: 'content',
                        label: '工作内容',
                        'min-width': 160,
                        'show-overflow-tooltip': true,
                    }
                },
                {
                    attrs: {
                        prop: 'remark',
                        label: '备注',
                        'min-width': 120,
                        'show-overflow-tooltip': true,
                    }
                }
            ])
        }
    }
}
</script>

<style lang="scss" scoped>
.project {
    width: 100%;
    border: 1px solid #F5F7FA;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 24px;
    ::v-deep {
        .el-collapse-item__header {
            width: 100%;
            height: 42px;
            line-height: 42px;
            padding-left: 16px;
            background: #FAFAFA;
            border: 1px solid #F0F4F7;
            border-radius: 2px;

            display: flex;
            justify-content: space-between;

            font-size: 14px;
            font-weight: bold;
            color: #171725;

            .total {
                font-weight: normal;
                color: #44444F;
            }
            .icon {
                margin-left: 8px;
                padding: 8px 16px;
                cursor: pointer;
                &:hover {
                    font-weight: bold;
                }
            }
            .el-collapse-item__arrow {
                margin: 0 16px;
            }
        }
        .el-collapse-item__content {
            padding-bottom: 0;
        }
    }
    .header {
        width: 100%;
        margin-right: 8px;
        display: flex;
        justify-content: space-between;
    }
    .content {
        margin: 24px 32px;
    }
    
    &.project-item {
        border: 1px solid #E2E2E2;
        .header {
            background-color: #fff;
        }
    }
}
</style>
